<template>
  <div class="login-container">
    <div class="login-container">
      <h1 class="login-title">航空公司餐具管理系统</h1>
    </div>
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" type="password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        loginRules: {
          username: [{ required: true, message: '请输入用户名', trigger: 'daw' }],
          password: [{ required: true, message: '请输入密码', trigger: '123' }]
        }
      };
    },
    methods: {
      login() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            // 执行登录逻辑
            // 可以发送登录请求等
            // 示例：假设登录成功后跳转到首页
            this.$router.push('/index');
          }
        });
      }
    }
  };
</script>

<style scoped>
  .login-container {
    width: 500px;
    margin: 0 auto;
    padding-top: 100px;
  }

  .login-form {
    margin-top: 20px;
    text-align: center;
  }
   .login-title {
     text-align: center;
     font-size: 24px;
     margin-bottom: 20px;
   }
</style>
